<template>
  <div class="ywt_home_container">
        <div class="ywt_top_container">
          <ywtHeader></ywtHeader>
        </div>
        <div class="ywt_hidden"></div>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-tabs v-model="active" @click="ywtClick" color="pink">
          <van-tab class="ywt_tab" name="全部" title="全部"></van-tab>
          <van-tab class="ywt_tab" name="精华" title="精华"></van-tab>
          <van-tab class="ywt_tab" name="分享" title="分享"></van-tab>
          <van-tab class="ywt_tab" name="问答" title="问答"></van-tab>
          <van-tab class="ywt_tab" name="招聘" title="招聘"></van-tab>
          <van-tab class="ywt_tab" name="客户端测试" title="客户端测试"></van-tab>
        </van-tabs>
        <ywtlist v-for="(item, index) in showList" :key="index" :item="item"></ywtlist>
        <van-cell-group></van-cell-group>
        <div class="ywt_backtop" @click="onBackTop">
          <p>回到顶部</p>
        </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import ywtHeader from "../components/ywtHeader"; //引入子组件
import ywtlist from "../components/ywtlist"; //引入展示组件
import {Toast} from "vant";

export default {
  name: "Home",
  components: {
    ywtHeader,
    ywtlist
  },
  data() {
    return {
      active: "全部",
      shuju: [], //所有数据
      showList: [] ,//展示数据
      isLoading:false,
    };
  },
  mounted() {
    // 请求数据
    this.$APIClient.login().then(res => {
     
      var temp = res.data.data;
      temp.forEach(ele => {
        if (ele.tab == "share") {
          ele.tab = "分享";
        } else if (ele.tab == "ask") {
          ele.tab = "问答";
        }
        this.shuju.push(ele);
      });
      console.log(this.shuju);
      this.showList = this.shuju;
    });
    var actives = localStorage.getItem("active");
    if (actives) {
      this.active = actives;
    }
  },
  methods: {
    ywtClick(key) {
      // 点击切换不同分类下面的内容
      this.active = key;
      // 保存
      localStorage.setItem("active", this.active);
      console.log(key);
      this.showList = [];
      // 判断一下
      switch (this.active) {
        // 如果是全部的，就把他添加到数组里面去，数组一开始是一个空的
        // 然后break停止
        case "全部":
          this.showList = this.shuju;
          break;
        case "精华":
          this.shuju.forEach(ele => {
            if (ele.tab == "精华") {
              this.showList.push(ele);
            }
          });
          break;
        case "精华":
          this.shuju.forEach(ele => {
            if (ele.tab == "精华") {
              this.showList.push(ele);
            }
          });
          break;
        case "分享":
          this.shuju.forEach(ele => {
            if (ele.tab == "分享") {
              this.showList.push(ele);
            }
          });
          break;
        case "问答":
          this.shuju.forEach(ele => {
            if (ele.tab == "问答") {
              this.showList.push(ele);
            }
          });
          break;
        case "招聘":
          this.shuju.forEach(ele => {
            if (ele.tab == "招聘") {
              this.showList.push(ele);
            }
          });
          break;
        case "客户端测试":
          this.shuju.forEach(ele => {
            if (ele.tab == "客户端测试") {
              this.showList.push(ele);
            }
          });
          break;
        // 如果是什么都没点的默认状态  就把全部的数据展现出来
        default:
          this.showList = this.shuju;
          break;
      }
    },
    //当触发点击时间的时候返回顶部0px,0px
    onBackTop() {
      scrollTo(0, 0);
    },
    // 上拉和下拉实现效果
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 3000);
    },
  }
}
</script>
<style lang="scss" scoped>
.ywt_top_container {
  width: 100%;
  height: 18vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}
.ywt_hidden {
  width: 100%;
  height: 18vh;
}
.ywt_backtop {
  width: 70px;
  height: 70px;
  text-align: center;
  background: rgb(209, 142, 223);
  font-size: 14px;
  display: flex;
  justify-content: space-around;

  position: fixed;
  color: #fff;
  bottom: 10%;
  right: 0;
  border-radius: 50%;
  p {
    width: 40px;
    margin-top: 14px;
  }
}
van-tab {
  color: rgb(2, 173, 45);
}
</style>
